import { s_getcommontableinfo, s_getSaleInfo } from "@/services/basis";
import { ProCard, ProColumns, ProTable } from "@ant-design/pro-components";
import { Button, Space, Tag ,Image} from "antd";
import { useState } from "react";

const App:React.FC=()=>{
     const [total,setTotal]=useState(0);

    interface DataType{
//         x_id,vouch_code,operate_time,vouch_status,
// material_id,userdefine_name,quantity,deliverdate,
// code,name,invstd,invstd2,munit_name,pic,
// org_name,org_id,custom_id,custom_name,
// business_name,business_id,
// quantity_produce_order,quantity_purchase_order,quantity_commission_order,
// quantity_produce_done,quantity_purchase_done,quantity_commission_done,
// quantity_deliver,quantity_stock,
x_id?:number,vouch_code?:string,operate_time?:string,vouch_status?:number,
material_id?:number,userdefine_name?:string,quantity?:number,deliverdate?:string,
code?:string,name?:string,invstd?:string,invstd2?:string,munit_name?:string,pic?:string,
org_name?:string,org_id?:number,custom_id?:number,custom_name?:string,
business_name?:string,business_id?:number,
quantity_produce_order?:number,quantity_purchase_order?:number,quantity_commission_order?:number,
quantity_produce_done?:number,quantity_purchase_done?:number,quantity_commission_done?:number,
quantity_deliver?:number,quantity_stock?:number,
progress_order?:number,progress_done?:number,progress_deliver?:number,
    };

const columns:ProColumns<DataType>[]=[
        {dataIndex:'pic',title:'图片' ,editable:false,width:60,search:false,
           render:(text,record,index,k)=>{
                       var pic="/basis_api/file/get2?filename="+record.code;
                       return   <Image src={pic}  style={{width:50,height:50}} alt='无' />
                  },
        },
        {dataIndex:'vouch_code',title:'发货单号',width:100,
              sorter:(a:any,b:any)=>a.vouch_code.length-b.vouch_code.length
        },
        {dataIndex:'custom_name',title:'店铺',width:160,
                sorter:(a:any,b:any)=>a.vouch_code.length-b.vouch_code.length},
        {dataIndex:'business_name',title:'业务员',width:100},
        {dataIndex:'deliverdate',title:'计划发货日期',valueType:'date',width:100},
        {dataIndex:'code',title:'SKU编码',
          search:false,sorter:(a:any,b:any)=>a.code-b.code},
        {dataIndex:'name',title:'商品名称',width:100},{dataIndex:'invstd',title:'包装规格',search:false,},
        {dataIndex:'invstd2',title:'型号',search:false},{dataIndex:'munit_name',title:'计量单位',search:false},
        {dataIndex:'quantity',title:'备货总数量',search:false},
        {dataIndex:'quantity_box',title:'已装箱数',render:(text)=>text!=0?text:'', search:false },
        {dataIndex:'quantity_unbox',title:'未装箱数',search:false,
            renderText(text, record, index, action) {
                   return <Tag color="red" style={{width:80}}>{(record.quantity?record.quantity:0)
                                 -(record.quantity_deliver?record.quantity_deliver:0)}</Tag>
                },
         },
        {dataIndex:'quantity_stockout',title:'出库数',},
        {dataIndex:'quantity_unstockout',title:'未出库数',},
        // {dataIndex:'quantity_produce_done',title:'生产完工数', },
        // {dataIndex:'quantity_purchase_order',title:'采购下单数', },
        // {dataIndex:'quantity_purchase_done',title:'采购入库数', },
        // {dataIndex:'quantity_commission_order',title:'委外下单数', },
        // {dataIndex:'quantity_commission_done',title:'委外入库数'},
        // {dataIndex:'progress_order',title:'下单比例',valueType:'progress',width:180,},
        // {dataIndex:'progress_done',title:'完工比例',valueType:'progress',width:180,},
      
        // {dataIndex:'vouch_status',title:'进度',
        //     render:(text:any)=>text.indexOf('延')>=0?<Tag color='red' style={{width:60}}>{text}</Tag>:text,
        // },
        // {dataIndex:'org_name',title:'销售部门'},
        
        // {dataIndex:'state',title:'状态'}
    ];

     
    return <>
      <ProCard title='店铺发货进度跟踪' style={{height:'85vh',overflow:'auto'}}
         extra={<Space>
            {/* <Button>查看采购齐套</Button>
            <Button>查看包装进度</Button>
            <Button>查看出库明细</Button> */}
         </Space>}
      >
          <ProTable<DataType>
             columns={columns}
            //  dataSource={tdata}
             search={{span:4}}
            //  rowSelection={{
            //     type:'checkbox'
            //  }}
            options={false}
            // sortDirections={["ascend"]}
            // scroll={{y:600,}}
            // request={async (param)=>{
            //     // const x:any=await s_getcommontableinfo({x_id:1,cate_id:[],id:0,source:'v_sale_order_progress2'});
            //     return{
            //         data:x.data[0],
            //         success:true,
            //     };
            // }}
             request={async (param)=>{
                const x=await s_getSaleInfo({source:'v_sale_order_progress2',x_id:1,
                                              fdata:{id:0,param}});
                setTotal(x.data[0][0].count);
                return{
                     data:x.data[1],
                     success:true,
                      }
                 }}
            scroll={{y:'65vh'}}
                    pagination={{
                    showQuickJumper:true,
                    showSizeChanger:true,
                    defaultPageSize:5,
                    defaultCurrent:1,
                    total,
                  }}
          /> 
      </ProCard> 
    </>;
}

export default App;